<!-- 商城-幸运盲盒 -->
<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { toast } from '@/uni_modules/uview-plus';
import { getUserInfoApi } from '@/api/user.js';
import { getBasicRulesApi } from '@/api/shop.js'
// 数据
const info = reactive({
  barHeight: 0, // 状态栏高度
  navHeight: 0, // 导航栏高度
  userInfo: {},
  ruleInfo: `<p>1、平台用户每消费一笔订单且订单发货后即可免费活动一次盲盒抽奖机会（解锁奖品订单消费后即可获得一次）</p><p>2、获得的奖品将存入“水库”-“我的奖品”中，您可通过奖池解锁全部奖品</p>`,
  isRunning: false, // 是否抽奖中
  num: 3, // 剩余抽奖次数
  time: 10, // 倒计时
  currentIndex: null, // 当前位置
  speed: 200, // 默认速度
  lotteryFesultShow: false, // 抽奖结果弹窗显示状态
  bool: false // 是否中奖
})
// 获取手机状态栏高度
onLoad(() => {
  //获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
  let { statusBarHeight } = uni.getSystemInfoSync()
  info.barHeight = statusBarHeight
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  info.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
})
onShow(() => {
  init()
})
// 初始化
const init = () => {
  // 获取用户抽奖次数
  getUserInfoApi().then(res => {
    // 获取用户信息
    info.userInfo = res.data
    info.num = res.data.drawsNumber
  })
  // 获取抽奖规则
  getBasicRulesApi({
    id: 1
  })
    .then(res => {
      const data = res.data
      info.ruleInfo = data.settingContent
    })
}
// 返回
const goBack = () => {
  uni.navigateBack()
}
// 抽奖
const currentIndexList = [4, 1, 2, 3, 6, 9, 8, 7]
let interval = null;
let timeout = null;
let countdownInterval = null;
const luckDraw = () => {
  // 判断是否可抽奖
  if (info.num <= 0) return toast('暂无抽奖机会！')
  // 判断是否抽奖中
  if (info.isRunning === true) return
  info.isRunning = true

  let finalIndex = Math.floor(Math.random() * 8); // 随机生成最终中奖位置
  // 清除之前的定时器
  if (interval) clearInterval(interval);
  if (timeout) clearTimeout(timeout);
  if (countdownInterval) clearInterval(countdownInterval);

  // 开始倒计时
  countdownInterval = setInterval(() => {
    if (info.time > 0) {
      info.time--;  // 每秒减少1秒
    }
  }, 1000);
  // 抽奖动画逻辑
  interval = setInterval(() => {
    info.currentIndex = (info.currentIndex + 1) % 8;
    info.speed = info.speed - 5 > 50 ? info.speed - 5 : 50; // 逐渐加速并设定最低速度
  }, info.speed);

  // 10 秒后停止动画并显示中奖结果
  timeout = setTimeout(() => {
    clearInterval(interval);  // 停止动画
    clearInterval(countdownInterval);  // 停止倒计时

    // 让动画慢慢停下来
    let slowDownInterval = setInterval(() => {
      info.currentIndex = (info.currentIndex + 1) % 8;
      if (info.currentIndex === finalIndex) {
        clearInterval(slowDownInterval);  // 最终停止在中奖位置
        // 显示中奖结果
        lotteryResultCallback()
        // 恢复抽奖状态
        resetStatus()

      }
    }, 300);  // 减速

  }, 10000);  // 10秒后停止动画

}
// 抽奖结果回调
const lotteryResultCallback = (res) => {
  info.lotteryFesultShow = true
}
// 重置状态
function resetStatus() {
  info.num--
  info.time = 10
  info.speed = 200
  info.isRunning = false;
}

// 前往中奖记录页面
const goLuckRecord = () => {
  uni.navigateTo({
    url: '/subPackage/shop/blindBox/record'
  })
}
</script>

<template>
  <view class="blindBox-page">
    <!-- 背景 -->
    <image class="page-bg" style="width: 100vw; height: 100vh" src="/static/images/luck_draw_bg.png"
      mode="scaleToFill" />
    <!-- 导航栏 -->
    <view class="navber" :style="{ 'padding-top': info.barHeight + 'px' }">
      <view class="box" :style="{ 'height': info.navHeight + 'px' }" @click="goBack">
        <up-icon name="arrow-left" color="#333333" size="20"></up-icon>
      </view>
    </view>
    <!-- 内容部分 -->
    <view class="content" :style="{ 'padding-top': (info.barHeight + info.navHeight) + 'px' }">
      <!-- 抽奖标题 -->
      <view class="title-box">
        <text>幸运盲盒</text>
      </view>
      <!-- 抽奖模块 -->
      <view class="luck-draw-box">
        <image class="luck-draw-box-bg" style="width: 650rpx; height: 730rpx" src="/static/images/luck_draw_box.png"
          mode="scaleToFill" />
        <view class="cnt">
          <view class="center">
            <up-grid :border="false" col="3">
              <up-grid-item v-for=" item in 9" :key="item">
                <view v-if="item !== 5" class="item"
                  :class="info.currentIndex !== null && (item === currentIndexList[info.currentIndex]) ? 'active' : ''">
                  <image style="width: 150rpx; height: 150rpx;" src="/static/images/icons/prize.png"
                    mode="scaleToFill" />
                </view>
                <view v-else class="item btn-box" @click="luckDraw">
                  <view v-if="!info.isRunning" class="lottery-txt">
                    <view>立即抽奖</view>
                    <view class="num">({{ info.num }}次)</view>
                  </view>
                  <view v-else class="in-the-lottery-txt">
                    <view class="time">{{ info.time }} s</view>
                    <view>后开奖</view>
                  </view>
                </view>
              </up-grid-item>
            </up-grid>
          </view>
        </view>
      </view>
      <!-- 抽奖规则 -->
      <view class="rule-box">
        <view class="title">
          <text>抽奖规则</text>
        </view>
        <view class="tag-box" @click="goLuckRecord">
          <text>中奖记录</text>
        </view>
        <view class="cnt">
          <rich-text :nodes="info.ruleInfo"></rich-text>
        </view>
      </view>
    </view>
    <!-- 抽奖结果弹窗 -->
    <up-overlay :show="info.lotteryFesultShow">
      <view class="lotteryResult-warp">
        <view class="lotteryResult-box" @tap.stop>
          <image style="width: 650rpx; height: 786rpx;" class="bg" src="/static/images/lottery_result_bg.png"
            mode="scaleToFill" />
          <view class="lotteryResult-content">
            <view class="lotteryResult-title">
              <text v-if="info.bool" style="padding-left: 60rpx;">恭喜您中奖啦！</text>
              <text v-else>奖品与您擦肩而过</text>
            </view>
            <view class="lotteryResult-info">
              <view class="lotteryResult-info-title">
                <text v-if="info.bool">测试奖品一块</text>
                <text v-else>什么也没有</text>
              </view>
              <image style="width: 356rpx; height: 260rpx;" src="/static/images/gift_box.png" mode="scaleToFill" />
              <view class="lotteryResult-info-tip">
                <text v-if="info.bool" class="first">奖品已存入“水库”-"我的奖池"，您可\n随时领取</text>
                <text v-else>运气不太好呢，下次再来试试吧！</text>
              </view>
            </view>
          </view>
          <image src="/static/images/icons/down.png" class="close-btn" style="width: 70rpx; height: 70rpx;"
            mode="scaleToFill" @click="info.lotteryFesultShow = false" />
        </view>
      </view>
    </up-overlay>
  </view>
</template>

<style lang="scss" scoped>
.blindBox-page {

  // 背景
  & .page-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }

  // navber
  & .navber {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100vw;

    & .box {
      display: flex;
      align-items: center;
      padding-left: 30rpx;
    }
  }

  // 内容
  & .content {
    position: relative;
    z-index: 2;

    // 标题 
    & .title-box {
      margin-top: 10rpx;
      font-family: AppleSystemUIFont;
      font-size: 100rpx;
      color: #FFFFFF;
      text-align: center;
      text-shadow: 0px 6px 2px #FE7D14;

      & text {
        padding-right: 50rpx;
      }
    }

    // 抽奖模块
    & .luck-draw-box {
      position: relative;
      margin-top: 50rpx;
      margin-left: 50rpx;
      text-align: center;
      width: 650rpx;
      height: 730rpx;

      & .luck-draw-box-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      & .cnt {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        padding: 106rpx 50rpx 50rpx 50rpx;
        width: 100%;
        height: 100%;

        & .center {
          width: 100%;
          height: 100%;

          &::v-deep .u-grid {
            padding: 10rpx 20rpx;

            & .u-grid-item {
              margin-top: 20rpx;

              & .item {
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                width: 150rpx;
                height: 158rpx;
                background: #FFEACF;
                border-radius: 20rpx;
                border: 4rpx solid #F9DEC5;

                &.btn-box {
                  font-weight: bold;
                  font-size: 30rpx;
                  color: #FFFFFF;
                  background: #FE5223;
                  border: 4rpx solid #F9DEC5;

                  & .lottery-txt {
                    font-weight: bold;
                    font-size: 30rpx;
                    color: #FFFFFF;
                    line-height: 40rpx;

                    & .num {
                      font-size: 24rpx;
                      color: #FFFFFF;
                    }
                  }

                  & .in-the-lottery-txt {
                    font-weight: bold;
                    font-size: 30rpx;
                    color: #FFFFFF;
                    line-height: 40rpx;
                  }
                }

                &.active {
                  border: 4rpx solid #FE5223;
                }
              }
            }


          }
        }
      }
    }

    // 抽奖规则
    & .rule-box {
      position: relative;
      box-sizing: border-box;
      margin: 50rpx;
      padding: 40rpx;
      width: 650rpx;
      min-height: 422rpx;
      background: #FFF0E7;
      border-radius: 90rpx;
      overflow: hidden;

      & .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }

      & .tag-box {
        position: absolute;
        top: 36rpx;
        right: 0rpx;
        width: 198rpx;
        height: 54rpx;
        line-height: 54rpx;
        text-align: center;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        background: #FE5223;
        box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(212, 66, 27, 0.34);
        border-radius: 10rpx 0rpx 0rpx 10rpx;
      }

      & .cnt {
        margin-top: 30rpx;

        & rich-text {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
        }
      }

    }
  }

  // 抽奖结果弹窗
  & .lotteryResult-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;

    & .lotteryResult-box {
      position: relative;
      margin-bottom: 176rpx;
      width: 650rpx;
      height: 786rpx;

      // 背景
      & .bg {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }

      // 内容
      & .lotteryResult-content {
        position: relative;
        z-index: 2;

        text-align: center;

        // 标题
        & .lotteryResult-title {
          margin-top: 20rpx;
          text-align: center;

          & text {
            font-weight: 500;
            font-size: 60rpx;
            color: #FEFBDA;
          }
        }

        // 中奖信息
        & .lotteryResult-info {

          & .lotteryResult-info-title {
            margin-top: 94rpx;

            & text {
              font-size: 36rpx;
              color: #F66630;
            }
          }

          & image {
            margin-top: 10rpx;
          }

          & .lotteryResult-info-tip {
            margin: 0 auto;
            margin-top: 10rpx;
            width: 340rpx;

            & text {
              font-weight: 500;
              font-size: 20rpx;
              color: #F66630;

              &.first {
                display: block;
                line-height: 30rpx;
                white-space: nowrap;
                text-align: left;
              }
            }
          }
        }
      }

      & .close-btn {
        position: absolute;
        bottom: -100rpx;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}
</style>